<template>
	<view class="loginp">
		<view class="top" src="/static/login/bg.png">
			<view class="header">
				<!-- <image class="header-back" src="/static/login/back.png"></image> -->
				<view class="header-title">Remove Account</view>
				<!-- <view class="header-backImgr"></view> -->
			</view>
			<view class="middle">
				<image class="middle-logo" src="../../static/login/logo.png"></image>
				<view style="flex: 1;"></view>
				<!-- <image class="middle-kf" src="../../static/login/kf.png"></image>
				<view class="middle-right">
					Assistance
				</view> -->
			</view>
			<view class="content">
				<view class="content-view">
					<image class="content-view-left" src="/static/login/gq.png"></image>
					<view class="content-view-qh">+63</view>
					<input type="number" maxlength="10" class="content-view-text ml60" placeholder="9XXXXXXXXX" v-model="phone" />
				</view>
				<view class="content-view mt24">
					<input type="number" maxlength="6" placeholder="Enter 6-digit password" class="content-view-text" v-model="password" />
					<image class="content-view-right" src="/static/login/eye.png"></image>
				</view>
			</view>
			<view class="btn" @click="startRemove">
				REMOVE
			</view>
			
			<!-- <view class="remove">
				remove
			</view> -->
		</view>
		
	</view>
</template>

<script>
	
	import login from "@/api/login.js"
	export default {
		data() {
			return {
				phone: '',
				password: ''
			}
		},
		onLoad() {

		},
		methods: {
			startRemove(){
				if(this.phone.length == 0){
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if(this.password.length == 0){
					return uni.showToast({
						title:'Please Enter 6-digit password',
						icon: 'none'
					})
				}
				
				uni.showLoading({
					title:'loading...',
					mask: true
				})
				const _this = this
				login.cancelUser({
					phone: this.phone,
					password: this.password
				}).then(res=>{
					console.log("res===",res);
					uni.hideLoading()
					_this.phone = ''
					_this.password = ''
				}).catch(e=>{
					console.log("e===",e);
					uni.hideLoading()
				})
				// uni.request({
				//     url: 'https://api.kitakuarta.com/Ka/Login/cancel_info', //仅为示例，并非真实接口地址。
				//     data: {
				// 		phone: this.phone,
				// 		password: this.password
				// 	},
				//     header: {
				//     },
				// 	method:'POST',
				//     success: (res) => {
				//         console.log('res===',res);

				//     },
				// 	fail:(err) => {
				// 		console.log('err===',err);
				// 	}
				// });

				// 9000000120
				// 9000000121
				// 9000000122
			},
			startLogin(){
				if(this.phone.length == 0){
					return uni.showToast({
						title: 'Please Enter phone number',
						icon: 'none'
					})
				}
				if(this.password.length == 0){
					return uni.showToast({
						title:'Please Enter 6-digit password',
						icon: 'none'
					})
				}
				
				uni.showLoading({
					title:'loading...',
					mask: true
				})
				const _this = this
				login.cancelUser({
					phone: this.phone,
					password: this.password
				}).then(res=>{
					uni.hideLoading()
					_this.phone = ''
					_this.password = ''
				}).catch(e=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.loginp{
		width: 100vw;
		min-height: 100vh;
	}
	
	.top {
		// display: flex;
		// flex-direction: column;
		// // align-items: center;
		// // justify-content: center;
		background-image: url(/static/login/bg.png);
		background-size: 100% 100%;
		width: 100vw;
		height: 740rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.header{
		width: 100vw;
		height: 46rpx;
		display: flex;
		flex-direction: row;
		
		&-title{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 18px;
			color: #A24E00;
			text-align: center;
			font-style: normal;
			text-transform: none;
			flex: 1;
			line-height: 46rpx;
			height: 46rpx;
			
		}
		&-back{
			width: 46rpx;
			height: 46rpx;
			margin-left: 15rpx;
		}
		&-backImgr{
			width: 46rpx;
			height: 46rpx;
			margin-right: 15rpx;
		}
	}
	
	
	
	.middle{
		margin-top: 86rpx;
		padding: 0 24rpx;
		display: flex;
		flex-direction: row;
		
		&-logo{
			margin-top: 2rpx;
			width: 216rpx;
			height: 40rpx;
		}
		
		&-kf{
			width: 44rpx;
			height: 44rpx;
		}
		&-right{
			width: 74px;
			height: 44rpx;
			font-family: Inter, Inter;
			font-weight: 500;
			font-size: 14px;
			color: #A24E00;
			line-height: 44rpx;
			margin-left: 6rpx;
			text-align: left;
			font-style: normal;
			text-decoration-line: underline;
			text-transform: none;
		}
	}
	
	.content{
		margin-top: 60rpx;
		width: 100vw;
		height: 234px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.mt24{
			margin-top: 24rpx;
		}
		
		.ml60{
			margin-left: 60rpx;
		}
		&-view{
			width: calc(100vw - 100rpx);
			margin: 0 50rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid #EEEEEE;
			display: flex;
			flex-direction: row;
			padding: 0rpx 28rpx;
			&-left{
				width: 60rpx;
				height: 40rpx;
				margin-top: 27rpx;
			}
			&-qh{
				margin-left: 12rpx;
				width: 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 96rpx;		
				height: 96rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			
			&-text{
				margin: 25rpx 0rpx;
				height: 46rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #8E8E8E;
				flex: 1;
			}
			
			&-right{
				width: 40rpx;
				height: 40rpx;
				margin-top: 28rpx;
			}
		}
	}
	
	.btn{
		margin: 0rpx 50rpx;
		height: 96rpx;
		background: linear-gradient( 90deg, #FE9100 0%, #FC6A02 100%);
		border-radius: 28rpx;
		opacity: 0.5;
		
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	.remove{
		margin-top: 40rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #696969;
		text-align: center;
		font-style: normal;
		text-transform: none;
		width: 100vw;
	}
</style>
